<template>
  <div class="header">
    <el-menu
      :default-active="activeIndex"
      class="el-menu"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
      router
    >
      <el-menu-item>
        <img src="@/assets/logo.png" class="logo" alt="logo" />
        <div class="title">
          <p class="name">越南中国商会安徽企业联合会</p>
          <p class="subname">
            VIETNAM CHINA CHAMBER OF COMMERCE ANHUI FEDERATION
          </p>
        </div>
      </el-menu-item>
      <div class="flex-grow"></div>
      <el-menu-item index="/" class="el-menu-item">首页</el-menu-item>
      <el-sub-menu index="2" :teleported="false">
        <template #title class="el-menu-item">关于我们&nbsp;</template>
        <el-menu-item index="2-1" class="el-menu-item">组织概况</el-menu-item>
        <el-menu-item index="2-2" class="el-menu-item">理事会</el-menu-item>
        <el-menu-item index="2-3" class="el-menu-item">联系我们</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3" :teleported="false">
        <template #title class="el-menu-item">新闻&nbsp;</template>
        <el-menu-item index="3-1" class="el-menu-item">商业新闻</el-menu-item>
        <el-menu-item index="3-2" class="el-menu-item">商会新闻</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="4" :teleported="false">
        <template #title class="el-menu-item">会员&nbsp;</template>
        <el-menu-item index="4-1" class="el-menu-item">会员名录</el-menu-item>
        <el-menu-item index="4-2" class="el-menu-item">会员申请</el-menu-item>
        <el-menu-item index="4-3" class="el-menu-item">会员福利</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="5" :teleported="false">
        <template #title class="el-menu-item">活动&nbsp;</template>
        <el-menu-item index="5-1" class="el-menu-item"
          >进行中的活动</el-menu-item
        >
        <el-menu-item index="5-2" class="el-menu-item"
          >即将进行的活动</el-menu-item
        >
        <el-menu-item index="5-3" class="el-menu-item"
          >已过去的活动</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="6" :teleported="false">
        <template #title class="el-menu-item">服务&nbsp;</template>
        <el-menu-item index="6-1" class="el-menu-item">赴越服务</el-menu-item>
        <el-menu-item index="6-2" class="el-menu-item">在越服务</el-menu-item>
        <el-menu-item index="6-3" class="el-menu-item">生活服务</el-menu-item>
      </el-sub-menu>
    </el-menu>
    <div class="right-icon">
      <div class="login-cont" @click="handleLogin">
        <img src="@/assets/common/login-icon.png" alt="" />
        <span>个人登录/注册</span>
      </div>
      <div class="language-cont">
        <img src="@/assets/common/language-icon.png" alt="" />
        <el-dropdown>
          <span class="el-dropdown-link">
            语言<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>中文</el-dropdown-item>
              <el-dropdown-item>英文</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ArrowDown } from "@element-plus/icons-vue";
import { ref } from "vue";
import router from "../router/index";

const activeIndex = ref("/");
const handleSelect = (key: string, keyPath: string[]) => {
  activeIndex.value = key;
  console.log(key, keyPath);
};
const handleLogin = () => {
  activeIndex.value = 'login';
  router.push({ name: "login" });
};
</script>
<style scoped lang="scss">
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;
  padding: 27px 66px 27px 110px;
  z-index: 10000000;
  background: #fff;
  .logo{
    width: 94px;
    height: 94px;
  }
  .right-icon {
    position: absolute;
    right: 88px;
    top: 27px;
    display: flex;
    align-items: center;
    .login-cont,
    .language-cont {
      display: flex;
      align-items: center;
      font-size: 22px;
      padding-left: 20px;
      cursor: pointer;
      color: #737373;
      img {
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }
    }
    .login-cont {
      padding-right: 20px;
      position: relative;
      &::after {
        content: "";
        width: 1px;
        height: 16px;
        background: #c2c2c2;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -8px;
      }
    }
    .language-cont {
      .el-dropdown {
        height: 24px;
      }
      .el-dropdown-link {
        font-size: 22px;
        display: flex;
        align-items: center;
      }
      .el-icon {
        color: #737373;
      }
    }
  }
}

.el-menu {
  width: 100%;
  height: 100%;
  .flex-grow {
    flex-grow: 1;
  }
  :deep(.el-popper) {
    margin-top: 20px;
  }
}
:deep(.el-menu--horizontal > .el-menu-item:not(:nth-child(1))) {
  padding-top: 60px;
}
:deep(.el-sub-menu) {
  padding-top: 60px;
}
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 20px;
  .name {
    font-size: 38px;
    height: 56px;
    line-height: 56px;
  }
  .subname {
    font-size: 17px;
    height: 20px;
    line-height: 20px;
  }
}
.el-menu--horizontal.el-menu {
  border: none;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border: none;
  color: #cb2323 !important;
  font-size: 36px;
  font-weight: bold;
}
.el-menu-item {
  font-size: 28px;
  transition: none;
}
.el-menu--horizontal > .el-sub-menu :deep(.el-sub-menu__title) {
  font-size: 28px;
}
.el-menu--horizontal > .el-sub-menu:hover :deep(.el-sub-menu__title) {
  background: none;
  color: #141933;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background: none;
  color: #141933;
}
:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
  border: none;
  color: #cb2323 !important;
  font-size: 36px;
  font-weight: bold;
}
:deep(.el-sub-menu__title) {
  transition: none;
}
.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-menu-item.is-active:hover,
.el-menu--horizontal .el-menu .el-sub-menu.is-active > .el-sub-menu__title,
.el-menu--horizontal
  .el-menu
  .el-sub-menu.is-active
  > .el-sub-menu__title:hover {
  color: #cb2323 !important;
}
.el-menu--horizontal > :deep(.el-menu-item.is-active) {
  border: none;
}
.el-sub-menu :deep(.el-sub-menu__icon-arrow) {
  font-size: 24px;
  margin-top: -12px;
  margin-left: 2px;
}
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-sub-menu__title {
  padding: 30px;
  position: relative;
  &::after {
    content: "";
    display: inline-block;
    width: calc(100% - 60px);
    height: 1px;
    background: #c2c2c2;
    position: absolute;
    bottom: 0;
    left: 30px;
    opacity: 0.2;
  }
}
.el-menu--horizontal .el-menu .el-menu-item:nth-last-child(1) {
  padding-bottom: 60px;
  &::after {
    bottom: 30px;
  }
}
</style>
